<template>
	<div class="container">
		<navigationBar title="编辑资料"></navigationBar>
		<div class="content" :style="'padding-top: ' + navigationBarHeight + 'px;'">
			<settingCell mode="pic" :value="userInfo.avatar" title="头像" @click.native="upAvatar"></settingCell>
			<settingCell title="名字" :value="userInfo.nickname" @click.native="toEditNickname"></settingCell>
			<settingCell title="ID" :value="userInfo.id" :arrow="false"></settingCell>

			<settingCell title="简介" :value="userInfo.introduction || '暂无简介'" @click.native="toEditIntro"></settingCell>
			<picker @change="bindPickerChange" :value="userInfo.gender == 1? 0:1" :range="sixList">
				<settingCell title="性别" :value="userInfo.gender == 1 ?'男':'女'"></settingCell>
			</picker>

			<picker mode="date" :value="date" @change="bindDateChange">
				<settingCell title="生日" :value="userInfo.birthdate"></settingCell>
			</picker>
			<settingImg mode="pic" :value="userInfo.backgroundImage" title="背景图" @click.native="upAvatarBg">
			</settingImg>
		</div>
		<!-- <btn1 title="退出登录" @click="logout"></btn1> -->
	</div>
</template>

<script>
	import data from '@/js/my/user/data.js';
	import methods from '@/js/my/user/methods.js';
	import {
		mapState
	} from 'vuex';
	import navigationBar from '../../components/navigationBar.vue';
	import settingCell from '@/components/settingCell.vue';
	import settingImg from '@/components/settingImg.vue';
	import btn1 from '../../components/btn1.vue'
	export default {
		data,
		methods,
		onLoad() {
			this.date = this.getDate({
				format: true
			})
		},
		onShow() {
			this.getUserInfo()
		},
		onHide() {},
		components: {
			navigationBar,
			settingCell,
			btn1,
			settingImg
		},
		computed: {
			...mapState(['navigationBarHeight', 'userInfo'])
		}
	};
</script>
<style scoped lang="scss">
	@import '~@/style/my/user.scss';
</style>